<template>
    <div class="rootContainer">
          <!--          threejs画布部分-->
         <div id="canvasContainer">
         </div>
         <!--          UI部分-->
        <div id="tag">
          <div class="desInfo" >{{RecData}}</div>
          <div class="desValue" >{{sphereR}}</div>
        </div>

         <div class="UIContainer">
           <div><img src="../assets/img/left.png" />左键旋转</div>
           <div><img src="../assets/img/right.png" />右键拖动</div>
           <div  @click="resetPosition"><img src="../assets/img/reset.png" />重置位置</div>
         </div>

      </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'Demo1',
  data () {
    return {
      clock: new THREE.Clock(),
      RecData: '半径',
      sphereR: 10,
      scene: null,
      camera: null,
      controls: null,
      renderer: null
    }
  },
  mounted () {
    this.init()
    this.render()
  },
  created () {
  },
  beforeDestroy () {
    this.scene = null
    this.camera = null
    this.controls = null
    this.renderer = null
  },
  methods: {
    // 3维转2维
    transPosition (position) {
      const worldVector = new THREE.Vector3(position.x, position.y, position.z)
      const vector = worldVector.project(this.camera)
      const halfWidth = window.innerWidth / 2
      const halfHeight = window.innerHeight / 2
      return {
        x: Math.round(vector.x * halfWidth + halfWidth),
        y: Math.round(-vector.y * halfHeight + halfHeight)
      }
    },
    divRender () {
      // 计算三维坐标对应的屏幕坐标
      var position = new THREE.Vector3(30, 30, 10)
      var windowPosition = this.transPosition(position)
      var left = windowPosition.x
      var top = windowPosition.y
      // 设置div屏幕位置
      const div = document.getElementById('tag')
      div.style.display = ''
      div.style.left = left + 'px'
      div.style.top = top + 'px'
    },
    init () {
      const container = document.getElementById('canvasContainer')
      this.scene = new THREE.Scene()
      // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
      var geometry21 = new THREE.CircleGeometry(this.sphereR, 50)
      var material21 = new THREE.MeshPhongMaterial({ color: 0x363636 })
      var mesh21 = new THREE.Mesh(geometry21, material21) // 网格模型对象Mesh
      mesh21.translateY(-20) // 球体网格模型沿Y轴正方向平移120
      mesh21.rotateX(Math.PI / 2)
      this.scene.add(mesh21)
      // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
      var geometry22 = new THREE.CircleGeometry(this.sphereR, 50)
      var material22 = new THREE.MeshPhongMaterial({ color: 0x363636 })
      var mesh22 = new THREE.Mesh(geometry22, material22) // 网格模型对象Mesh
      mesh22.translateY(100) // 球体网格模型沿Y轴正方向平移120
      mesh22.rotateX((Math.PI / 2) * 3)
      this.scene.add(mesh22)
      // /创建管道成型的路径(3D样条曲线)
      var path = new THREE.CatmullRomCurve3([
        new THREE.Vector3(0, -20, 0),
        new THREE.Vector3(0, 100, 0)
      ])
      // path:路径   40：沿着轨迹细分数  2：管道半径   25：管道截面圆细分数
      var geometry = new THREE.TubeGeometry(path, 40, 10, 25)
      var material3 = new THREE.MeshPhongMaterial({
        color: 0x5a8fcc, // 三角面颜色
        side: THREE.DoubleSide // 两面可见
        // map: texture, //设置颜色贴图属性值
      }) // 材质对象
      material3.wireframe = false // 线条模式渲染(查看细分数)
      var mesh3 = new THREE.Mesh(geometry, material3) // 旋转网格模型对象
      this.scene.add(mesh3) // 旋转网格模型添加到场景中

      // 利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。要添加这个帮手，使用下面的代码：
      var axisHelper = new THREE.AxesHelper(1000)
      this.scene.add(axisHelper)

      // 点光源
      var point = new THREE.PointLight(0xffffff)
      point.position.set(0, 1000, 0) // 点光源位置
      this.scene.add(point) // 点光源添加到场景中
      var point2 = new THREE.PointLight(0xff00ff)
      point2.position.set(1000, 1000, 1000) // 点光源位置
      this.scene.add(point2) // 点光源添加到场景中
      // 环境光
      var ambient = new THREE.AmbientLight(0x999999)
      this.scene.add(ambient)

      this.camera = new THREE.PerspectiveCamera(
        45,
        container.clientWidth / container.clientHeight,
        0.1,
        10000
      )
      this.camera.position.set(250, 100, 250)
      this.camera.lookAt(0, 0, 0)
      this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
        precision: 'highp'
      })
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      this.renderer.setClearColor('#bbbbbb', 1.0) // 背景色

      container.appendChild(this.renderer.domElement)
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
      this.controls.target.set(0, 0, 0)
      this.controls.enableZoom = true
      this.controls.zoomSpeed = 2.0
      this.controls.enablePan = true // 开启右键拖拽
      // 设置相机距离原点的最远距离
      this.controls.minDistance = 2
      // 设置相机距离原点的最远距离
      this.controls.maxDistance = 1000
      this.controls.update()
    },
    // 执行渲染操作
    render () {
      requestAnimationFrame(this.render)
      this.renderer.render(this.scene, this.camera)
      this.divRender()
      var time = this.clock.getDelta()
      if (this.mixer) {
        this.mixer.update(time)
      }
    },
    resetPosition () {
      this.camera.position.set(250, 100, 250)
      this.camera.lookAt(0, 0, 0)
      this.controls.target.set(0, 0, 0)
    }
  }
}
</script>

<style lang="scss" scoped>
  .rootContainer {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /*background-color: rebeccapurple;*/
    position: relative;
    #canvasContainer
    {
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }

    #tag {
      position: absolute;
      background-color: rgb(46, 197, 53);
      opacity: 0.5;
      font-size: 4px;
      color: aqua;
      width: 50px;
      height: 40px;
      padding: 1px 1px 1px;
      .desInfo{
        color:white;
        font-size: 0.1rem;
      }
      .desValue{
        font-size: 0.11rem;
        font-weight: bold
      }
    }
    .UIContainer
    {
      position: absolute;
      right: 0;
      top: 0;
      width: 200px;
      height: 100%;
      background-color: rgba(28, 26, 26, 0.2);
      display: flex;
      flex-direction: column;
      div{
        height: 100px;
        width: 100%;
        img{
          display: inline-block;
          width: 20%;
          vertical-align: middle;
          margin: 10px 5px 10px 25px;
        }
      }

    }
  }

</style>
